<template>
  <div class="app-container" :class="{menus: showMenu}">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
        </router-view>
    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
    </router-view>
    <div class="tabbar-container" v-if="showMenu">
      <tabbar>
        <tabbar-item :selected="$route.path===item.route"
          v-for="(item,i) in tabList" :key="i" :link="item.route">
          <template>
            <i slot="icon" :class="$route.path.includes(item.route)?item.iconActive:item.icon"></i>
            <span slot="label" :style="$route.path===item.route?'color:#D44743;':'color:#999999;'">{{item.name}}</span>
          </template>
        </tabbar-item>
      </tabbar>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Menus',
  components: {
  },
  computed: {
    showMenu () {
      return this.$route.meta.menu
    }
  },
  data () {
    return {
      tabList: [
        { name: '首页', route: '/home', icon: 'icon-home', iconActive: 'icon-home-active' },
        { name: '比分直播', route: '/live', icon: 'icon-live', iconActive: 'icon-live-active' },
        { name: '关注', route: '/attention', icon: 'icon-attention', iconActive: 'icon-attention-active' },
        { name: '我的', route: '/mine', icon: 'icon-mine', iconActive: 'icon-mine-active' }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
  .app-container {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f7f7f7;
    &::-webkit-scrollbar{
      display: none;
    }
    &.menus {
      padding-bottom: 0.98rem;
    }
    .tabbar-container {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 0.98rem;
      background: rgba(255, 255, 255, 0.9);
      z-index: 1000;
      .weui-tabbar__icon {
        i {
          display: block;
          width: 0.5rem;
          height: 0.5rem;
          margin: auto;
          background-repeat:no-repeat;
          background-size:100% 100%;
          &.icon-home {
            background-image: url('../assets/imgs/menus/icon-home@2x.png');
          }
          &.icon-home-active {
            background-image: url('../assets/imgs/menus/icon-home-active@2x.png');
          }
          &.icon-live {
            background-image: url('../assets/imgs/menus/icon-live@2x.png');
          }
          &.icon-live-active {
            background-image: url('../assets/imgs/menus/icon-live-active@2x.png');
          }
          &.icon-attention {
            background-image: url('../assets/imgs/menus/icon-attention@2x.png');
          }
          &.icon-attention-active {
            background-image: url('../assets/imgs/menus/icon-attention-active@2x.png');
          }
          &.icon-mine {
            background-image: url('../assets/imgs/menus/icon-mine@2x.png');
          }
          &.icon-mine-active {
            background-image: url('../assets/imgs/menus/icon-mine-active@2x.png');
          }
        }
      }
    }
  }
</style>
